<script setup lang="ts">
import { useUserStore,useTokenStore } from "@/store";
import {useRouter} from "vue-router";
import { ref,reactive } from "vue";
import {verifyUserAuthority} from "@/utils/VerifyUserAuthority.ts";
import {UploadProps,ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";

const userStore = useUserStore();
const tokenStore = useTokenStore();
const user = userStore.getUserInfo;
const editUserVisible = ref(false)
const router = useRouter();
const imageUrl = ref("")
const logout = ()=>{
  userStore.logout();
  tokenStore.logout();
  // 跳转到登录页
  router.push('/login');
}

const userForm = reactive({
  username: "",
  avatar:'', 
  email: "",
  phone: "",
  password: ""
})

const dialogCloseVisible = () =>{
  editUserVisible.value = false;
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  console.log(uploadFile.raw)
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const onSubmit = ()=>{
  verifyUserAuthority().then((res:boolean)=>{
    if (res){
      // 进行修改操作
      console.log(userForm);
      // 关闭对话框
      dialogCloseVisible();
    }
  })
}
</script>

<template>
<div class="head-container">
  <div class="head-user">
    <el-dropdown :hide-on-click="false">
      <img :src="'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80'"  alt="用户头像"/>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item divided>
            <div class="user-info">
              <h5 class="title">用户信息</h5>
              <div class="username">
               用户名：{{user.username}}
              </div>
              <div class="email">
               邮箱：{{user.email}}
              </div>
              <div class="phone">
               电话：{{user.phone}}
              </div>
            </div>
          </el-dropdown-item>
          <el-dropdown-item divided @click="editUserVisible = true">编辑信息</el-dropdown-item>
<!--          <el-dropdown-item disabled>Action 4</el-dropdown-item>-->
          <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</div>
  
  <el-dialog
      title="修改个人信息"
      v-model="editUserVisible"
       width="30%">
    <el-form
        label-position="left"
        :model="userForm"
        label-width="auto"
        style="max-width: 600px">
      <el-form-item label="头像" :required="true">
        <el-upload
            class="avatar-uploader"
            action="/system/upload-avatar"
            name="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar"  alt=""/>
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户名" :required="true">
        <el-input v-model="userForm.username"/>
      </el-form-item>
      <el-form-item label="密码" :required="true">
        <el-input type="password" v-model="userForm.password"/>
      </el-form-item>
      <el-form-item label="手机号码" :required="true">
        <el-input v-model="userForm.phone"/>
      </el-form-item>
      <el-form-item label="邮箱" :required="true">
        <el-input v-model="userForm.email"/>
      </el-form-item>
    </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogCloseVisible">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
  </el-dialog>
</template>

<style scoped>
.head-container {
  background-color: #304156;
  color: #fff;
  text-align: center;
  width: 100% !important;
}
.head-user{
  display: flex;
  align-items: center;
  justify-content: right;
  width: 100%;
  height: 80px;
  overflow: hidden;
}
.head-user img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.user-info{
  font-family: 宋体;
  font-size: 15px;
  color: gray;
}
.user-info:hover{
  font-size: 16px;
  color: gray;
}
.user-info .title{
  color: gray;
  font-size: 15px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
